"Playwright" và ca kiểm thử đầu tiên với playwright

Thanh Nguyễn ✍︎︎ 20-10-2020

Playwright.

Playwright là một thư viện Node.js để tự động hóa Chromium, Firefox và WebKit bằng một API duy nhất. Nó được xây dừng để tự động hóa hầu hết các tính năng trình duyệt web

Kiểm thử đầu tiên

Ở đây mình sẽ dùng playwright tự động login nhé.!

Tạo một thư mục cho project của bạn và khởi tạo một project Node mới bên trong thư mục bằng câu lệnh sau:

mkdir playright-test && cd playright-test && npm init -y

Sau khi thiết lập xong project,, chúng ta cần cài đặt thư viện Playwright và tạo một tệp có tên là index.js

chạy câu lệnh sau để cài đặt thư viện

yarn add playwright

hoặc nếu bạn dùng npm

npm i playwright

Tiếp theo ta tạo file index.js trong project Node mà bạn vừa tạo ở trên.

đầu tiên chúng ta cần import các engine của các trình duyệt từ playwright chẳng hạn như chromium.

const {chromium} = require('playwright')

Sau đó bằng cách gọi phương thức launch để tạo một đối tượng browser, context

tiếp theo đó tạo một page bằng cách sử dụng phương thức newPage

dùng goto để đi đến trang http://localhost:3001/login/ hoặc bạn có thể dùng địa chỉ này https://github.com/login

và cuối cùng là screenshot để chụp ảnh màn hình

        const browser = await chromium.launch();

        const context = await browser.newContext();

        const page = await context.newPage();

        await page.goto('http://localhost:3001/login/');

Tiếp theo sử dụng page.fill để tự động điền form elements

  await page.fill('input[name="login"]', account.login);
  await page.fill('input[name="password"]', account.password);

page.click để submit và screenshot chụp ảnh màn hình

await page.click('button[type="submit"]');
await page.screenshot({path: `img/example-${chromium.name()}.png`});

// đóng trình duyệt
await browser.close();

đây là file index.js của mình.Ở đây mình sử dụng kiểm thử trên chromium và webkit

const playwright = require("playwright");

const account = {login: 'thanh****.com', password: '*****'};

(async () => {
   
    for (const browserType of ['chromium', 'webkit']) {
        const crBrowser = await playwright[browserType].launch({headless: false, slowMo: 200});
        const crContext = await crBrowser.newContext();
        const crPage = await crContext.newPage();


        // Navigate and auto-wait on the page to load after navigation
        await crPage.goto('http://localhost:3001/login/');

        await crPage.fill('input[id="email"]', account.login);
        await crPage.click('button[type="submit"]');
        await crPage.fill('input[id="password"]', account.password);
        await crPage.click('button[type="submit"]');


        await verifyIsLoggedIn(crPage);
  
        // screenshot 
        await crPage.screenshot({path: `img/example-${browserType}.png`});
        
         // close
        await crBrowser.close();

    }

})();

const verifyIsLoggedIn = async (page) => {
    try {
        await page.waitForSelector("#account")
        console.log('logined')
    } catch (e) {
        console.log(e);
        if (e instanceof playwright.errors.TimeoutError) {
            // Do something if this is a timeout.
        }
    }

}

Đây là ảnh màn hình

example-chromium.png

example-webkit.png

Còn đây là ảnh chụp mô phỏng iphone-11

playwright còn mang lại rất nhiệu tiện ích khác mà các bạn có thể tìm hiểu ở đây:

Link tham khảo: